import React from 'react';
import { Table, Card, message } from 'antd';
import SearchForm from '../../components/AutoForm/SearchForm';
import { connect } from 'dva';

@connect(({ auditCost, loading }) => ({
  tableLoadingC: loading.effects['auditCost/page'],
  tableDataC: auditCost.childrenTable,
  columnsC: auditCost.columnsChlidren,

  tableLoading: loading.effects['auditCost/page'],
  tableData: auditCost.pageList,
  pagination: auditCost.pagination,
  columns: auditCost.columns,
  searchFields: auditCost.searchFields,
  searchValues: auditCost.searchValues,
  editId: auditCost.editId,
  selectionIds: auditCost.selectionIds,
  selectedRows: auditCost.selectedRows,
  selectionOrderIds: auditCost.selectionOrderIds,
}))
export default class EditableTable extends React.Component {
  rowClassName = (record, index) => {
    if (record.status === 'APPLY') {
      return 'orderParent';
    }
  };

  componentDidMount() {
    this.handleSearch();
  }

  expandedRowRender = record => {
    const { columnsC } = this.props;
    return <Table size="small" columns={columnsC} dataSource={record.orders} pagination={false} />;
  };

  handleSearchChange = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'auditCost/handleSearchChange',
      payload: fields,
    });
  };

  handleAdd = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'auditCost/handleAdd',
    });
  };

  handleSearch = () => {
    const { dispatch, pagination, searchValues } = this.props;
    let pageParam = { pageSize: pagination.pageSize, current: pagination.current };
    let searchParam = {};
    Object.keys(searchValues).map(key => {
      searchParam[key] = searchValues[key]['value'];
    });
    const param = {
      ...searchParam,
      ...pageParam,
      flag: 'auditPay',
    };
    dispatch({
      type: 'auditCost/page',
      payload: param,
    });
  };

  onChange = (selectedRowKeys, selectedRows) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'auditCost/handleSelection',
      payload: { selectedRowKeys, selectedRows },
    });
  };

  onSend = () => {
    const { dispatch, selectedRows } = this.props;
    if (!selectedRows.length) {
      return message.error('请选择要提交的数据');
    }
    selectedRows.forEach(row => {
      row.status = 'PASS'
    })
    dispatch({
      type: 'auditCost/audit',
      payload: selectedRows,
    }).then(() => {
      this.handleSearch();
    });
  };

  onReject = () => {
    const { dispatch, selectedRows } = this.props;
    if ( !selectedRows.length ) {
      return message.error('请选择要驳回的数据');
    }
    selectedRows.forEach(cost => {
      cost.status = 'ENTRY';
    })
    dispatch({
      type: 'auditCost/audit',
      payload: selectedRows,
    }).then(() => {
      this.handleSearch();
    });
  };

  render() {
    const {
      columns,
      pagination,
      tableLoading,
      tableData,
      searchFields,
      searchValues,
      editId,
      dispatch,
    } = this.props;
    const optColumns = columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: editId === record.id,
        }),
      };
    });

    pagination.onChange = (page, pageSize) => {
      let searchParam = {};
      Object.keys(searchValues).map(key => {
        searchParam[key] = searchValues[key]['value'];
      });
      dispatch({
        type: 'auditCost/page',
        payload: {
          ...searchParam,
          current: page,
          pageSize,
          flag: 'auditPay',
        },
      });
    };
    pagination.onShowSizeChange = (current, size) => {
      let searchParam = {};
      Object.keys(searchValues).map(key => {
        searchParam[key] = searchValues[key]['value'];
      });
      dispatch({
        type: 'auditCost/page',
        payload: {
          ...searchParam,
          current: current,
          pageSize: size,
          flag: 'auditPay',
        },
      });
    };

    const rowSelection = {
      type: 'checkbox',
      selections: this.props.selectedRows,
      selectedRowKeys: this.props.selectionIds,
      onChange: this.onChange,
      getCheckboxProps: record => ({
        disabled: record.status !== 'APPLY',
      }),
    };

    return (
      <Card bodyStyle={{ padding: 0 }}>
        <SearchForm
          header="审核费用->操作"
          layout="inline"
          onFieldsChange={this.handleSearchChange}
          isAdd={false}
          isDel={false}
          isReject={true}
          onReject={this.onReject}
          onAdd={this.handleAdd}
          onSend={this.onSend}
          onSubmit={this.handleSearch}
          onDel={this.onDel}
          isSend={true}
          fields={searchFields}
          fieldValue={searchValues}
        />

        <Table
          bordered
          rowKey="id"
          loading={tableLoading}
          dataSource={tableData}
          columns={optColumns}
          rowSelection={rowSelection}
          rowClassName={this.rowClassName}
          scroll={{ x: 'max-content' }}
          size="small"
          pagination={pagination}
          expandedRowRender={this.expandedRowRender}
        />
      </Card>
    );
  }
}
